<style lang="scss">

	.tab-bar-border {
		border-bottom: 1rpx solid #E5E5E5;
	}

	.tab-bar-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 60rpx;
	}

	.tab-bar-left {
		width: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

</style>

<template>
	<view class="tab-bar" :class="{'tab-bar-border': border}">
		<uni-nav-bar
			:fixed="fixed"
			:background-color="backgroundColor"
			:color="color"
			:shadow="shadow"
			@click-left="onClikeLeft"
		>
			<button slot="left" class="tab-bar-left" v-if="back">
				<uni-icon type="back" :color="color" size="20"></uni-icon>
			</button>
			<view class="tab-bar-title" v-text="title"></view>
		</uni-nav-bar>
		<view class="tab-bar-cover" v-if="fixed && cover">
			<uni-status-bar></uni-status-bar>
			<view style="width: 100%; height: 44px;"></view>
		</view>
	</view>
</template>

<script>
import uniIcon from '../uni-icon/uni-icon.vue';
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
import uniStatusBar from "@/components/uni-status-bar/uni-status-bar.vue";

export default {

	components: {
		uniIcon,
		uniNavBar,
		uniStatusBar
	},

	props: {
		title: {
			type: String,
			default: "",
		},
		back: {
			type: Boolean,
			default: true,
		},
		fixed: {
			type: Boolean,
			default: false,
		},
		shadow: {
			type: Boolean,
			default: false,
		},
		border: {
			type: Boolean,
			default: false,
		},
		color: {
			type: String,
			default: "#000",
		},
		backgroundColor: {
			type: String,
			default: "#FFF",
		},
		cover: {
			type: Boolean,
			default: false,
		}
	},

	data () {
		return {
			top: 44 + uni.getSystemInfoSync().statusBarHeight
		}
	},

	methods: {

		onClikeLeft () {
			this.$emit("on-back");
		}

	}

}
</script>
